/*
 * @Author: ZARR 
 * @Date: 2018-03-30 09:51:36 
 * @Last Modified by:   ZARR 
 * @Last Modified time: 2018-03-30 09:51:36 
 * @随着详情页下拉出现动画的插件
 */

<template>
   <div ref="child" :class="[flag ? animationName : '','animated']">
       <slot></slot>
   </div>
</template>

<script>
export default {
  data () {
    return {
        flag:false, //判断条件是否出现动画
        ScrollTop:0, //元素现在离网页顶部的距离
        windowHeight:0 //整个屏幕的高度
    };
  },

  props:{
     offsetTopNow:{ //滚动条距离网页顶部的距离
         required:true,
         type:Number
     },
     animationName:{ //动画的class名称，可配合animate.css一起使用，通常为class的名称
         required:true,
         type:String
     }
  },

  mounted(){
      this.init();
  },

  methods: {
      init(){ 
         this.ScrollTop = this.$refs.child.offsetTop; //获取目标元素离网页顶部的距离
         this.windowHeight = window.innerHeight; //获取浏览器窗口的高度
         this.showAnimation(this.offsetTopNow); 
      },
      showAnimation(value){ //是否展示动画
         if(!this.flag && value + this.windowHeight > this.ScrollTop)
         {
             console.log(this.animationName,value,this.windowHeight,this.ScrollTop);
             this.flag = true;
         }else{
             return ;
         }
      }
  },
  watch: {
      offsetTopNow(newVal){ //监听滚动条离网页顶部的高度并且判断是否展示动画
          this.showAnimation(newVal);
      }
  }
}

</script>
<style lang='stylus' scoped>
@import '~assets/styl/animation.styl';
.animated
    animation-delay .2s
</style>